<template>
  <div style="position: relative">
    <!-- <div class="myTimepicker">
      <el-date-picker
        @change="timePickerEvt"
        v-model="myTimeData"
        type="date"
        placeholder="选择日期"
      >
      </el-date-picker>
    </div> -->

    <div class="container_main">
      <div class="container_left">
        <div class="phyd">
          <div class="title">平衡裕度<span>单位:MW</span></div>
          <div id="phydChart" ref="phydChart"></div>
        </div>
        <div class="fqgdyd">
          <div class="title">分区供电裕度<span>单位:MW</span></div>
          <div id="fqgdydChart1" ref="fqgdydChart1"></div>
          <div class="line"></div>
          <div id="fqgdydChart2" ref="fqgdydChart2"></div>
        </div>
      </div>
      <div class="container_center">
        <div class="left">
          <div class="timeline">
            <el-timeline style="width: 100%">
              <el-popover
                v-for="(activity, index) in timeLineList"
                :key="index"
                placement="right"
                :width="index == 0 ? '240' : index == 24 ? '10' : '316'"
                trigger="click"
              >
                <!-- :class = "[activity.buttonType == 0 ? 'buttonBkGrey':'', ]"  -->
                <el-button
                  v-if="index !== 0"
                  :type="buttonType == 0 ? 'primary' : 'info'"
                  size="mini"
                  @click="changeTimeEvt(activity, '00', 0)"
                  >{{
                    addMinutesToTime(activity.timestamp, "00", index)
                  }}</el-button
                >
                <el-button
                  v-if="index !== 24"
                  :type="buttonType == 1 ? 'primary' : 'info'"
                  size="mini"
                  @click="changeTimeEvt(activity, '15', 1)"
                  >{{
                    addMinutesToTime(activity.timestamp, "15", index)
                  }}</el-button
                >
                <el-button
                  v-if="index !== 24"
                  :type="buttonType == 2 ? 'primary' : 'info'"
                  size="mini"
                  @click="changeTimeEvt(activity, '30', 2)"
                  >{{
                    addMinutesToTime(activity.timestamp, "30", index)
                  }}</el-button
                >
                <el-button
                  v-if="index !== 24"
                  :type="buttonType == 3 ? 'primary' : 'info'"
                  size="mini"
                  @click="changeTimeEvt(activity, '45', 3)"
                  >{{
                    addMinutesToTime(activity.timestamp, "45", index)
                  }}</el-button
                >

                <!-- <div > -->
                <el-timeline-item
                  slot="reference"
                  style="cursor: pointer"
                  :class="[
                    index + '' == currentHour
                      ? 'timeline-wrap2'
                      : 'timeline-wrap',
                  ]"
                  size="large"
                  color="#ccc"
                  :timestamp="activity.timestamp"
                >
                  <!-- 
                  <el-timeline-item @click="clickTimeLineEvt" slot="reference" style="cursor: pointer;"
                  class='timeline-wrap'  size="large" color="#ccc"
                  :timestamp="activity.timestamp"> -->
                  <div
                    :class="[
                      activity.type == '0'
                        ? 'timeline-abs'
                        : activity.type == '1'
                        ? 'timeline-abs abs-red'
                        : 'timeline-abs abs-yellow',
                    ]"
                  ></div>
                  <img
                    v-if="activity.status == '1'"
                    src="@/assets/images/icon-top.png"
                    class="timeline-icon"
                  />
                  <img
                    v-if="activity.status == '2'"
                    src="@/assets/images/icon-bottom.png"
                    class="timeline-icon"
                  />
                </el-timeline-item>
                <!-- </div> -->
              </el-popover>
            </el-timeline>
            <!-- <template v-if="riNeiOrQian == 'yesterday'">
              <el-slider class="myslider" @input="handleSliderInput" @change="handleSliderChange" v-model="sliderValue"
                :min="min" :max="max" :show-tooltip="false" vertical></el-slider>
              <div class="mytooltip" v-if="showCustomTooltip" :style="{ top: customTooltipTop }">
              {{ customTooltipText }} 
              </div> 
            </template> -->
          </div>
          <div class="timeline-legend" style="width: 100%; margin-top: 10px">
            <div class="type1">裕度不足</div>
            <div class="type2">紧平衡</div>
            <div class="status1">正备用</div>
            <div class="status2">负备用</div>
          </div>
        </div>
        <div class="right">
          <div class="top" v-if="riNeiOrQian == 'yesterday'">
            <div class="map-info info-max">
              <span class="info-label">全天最大负荷</span>
              <span class="info-val">{{ mapInfo.maxfh }}<span></span></span>
            </div>
            <div class="map-info info-min">
              <span class="info-label">全天最小正备用</span>
              <span class="info-val">{{ mapInfo.minzby }}<span></span></span>
            </div>
            <div class="map-info info-min">
              <span class="info-label">全天最小负备用</span>
              <span class="info-val">{{ mapInfo.minfby }}<span></span></span>
            </div>
            <div class="map-info info-positive">
              <span class="info-label">正备用</span>
              <span class="info-val">{{ mapInfo.zby }}<span></span></span>
            </div>
            <div class="map-info info-nagetive">
              <span class="info-label">负备用</span>
              <span class="info-val">{{ mapInfo.fby }}<span></span></span>
            </div>
            <div class="info-unit">单位：MW</div>
          </div>
          <div class="top" v-if="riNeiOrQian == 'nowday'">
            <div class="map-info info-max">
              <span class="info-label">当前系统负荷</span>
              <span class="info-val"
                >{{ mapInfo.maxpower }}<span>(18:00)</span></span
              >
            </div>
            <div class="map-info info-positive">
              <span class="info-label">当前系统正备用</span>
              <span class="info-val"
                >{{ mapInfo.positive }}<span>(18:00)</span></span
              >
            </div>
            <div class="map-info info-nagetive">
              <span class="info-label">当前系统负备用</span>
              <span class="info-val"
                >{{ mapInfo.nagetive }}<span>(02:00)</span></span
              >
            </div>
            <div class="info-unit">单位：MW</div>
          </div>
          <div class="bottom">
            <div class="map">
              <div class="anhuiBox">{{ anhuiNumber }}</div>
              <div class="zhejiang">{{ zhejiangNumber }}</div>
              <div class="shanghaitext">{{ shanghaiNumber }}</div>

              <div style="width: 100%; height: 100%" id="map" ref="map"></div>
              <div class="map-legend">
                <div
                  class="legend-row"
                  v-for="(item, index) in mapLegend"
                  :key="index"
                >
                  <img
                    :src="
                      require('@/assets/images/theLittleConfig/' +
                        item.img +
                        '.png')
                    "
                  />
                  <span>{{ item.text }}</span>
                </div>
              </div>
              <img class="duanmian anhui" src="@/assets/images/anhui.png" />
              <img
                class="duanmian zhejiang"
                src="@/assets/images/zhejiang.png"
              />
              <img
                class="duanmian shanghai"
                src="@/assets/images/shanghai.png"
              />
              <img class="changjiang" src="@/assets/images/changjiang.png" />
            </div>
            <div class="news">
              <el-badge :value="this.areaApplyInfoList.length">
                <div class="news-title">最新消息</div>
              </el-badge>
              <div class="news-content">
                {{ newMsg }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container_right">
        <div class="gjtd">
          <div class="gjtd_title">
            <b>过江通道</b>
            <p style="font-size: 12px">单位: MW</p>
          </div>
          <div class="gjtd_echarts" ref="gjtd_echartsRef"></div>
          <div class="gjtd_jdt">
            <div class="top">
              <div class="chaoliu">
                <div
                  style="height: 10px; width: 10px; background-color: #3478a5"
                ></div>
                <div>潮流</div>
              </div>
              <div class="chaoliu xianzhi">
                <div
                  style="height: 10px; width: 10px; background-color: #92c9be"
                ></div>
                <div>限值</div>
              </div>
            </div>
            <div
              class="progressBox"
              v-for="(item, index) in progressList"
              :key="index"
            >
              <div class="name">
                <div class="nameText">{{ item.name }}</div>
                <div class="num">{{ item.value }}</div>
              </div>
              <div class="line">
                <div class="line_xian">
                  <el-progress
                    :percentage="item.percent"
                    :width="80"
                    :color="
                      item.percent >= 100
                        ? '#ed4646'
                        : item.percent >= 85 && item.percent < 100
                        ? '#d3ba58'
                        : '#d3ba58'
                    "
                  ></el-progress>
                </div>
                <div class="line_num">{{ item.total }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="dmzgzxx">
          <div class="dmzgzxx_title">
            <div class="leftText"><b>地区需求信息</b></div>
          </div>
          <div class="dmzgzxx_tabs">
            <div class="info">待处理申请</div>
            <div class="info">{{ this.areaApplyInfoList.length }}</div>
          </div>
          <div class="dmzgzxx_content_main">
            <div
              class="dmzgzxx_content"
              v-for="(item, index) in areaApplyInfoList"
              :key="index"
              @click="goDidiao"
            >
              <div class="colorBox">
                <div
                  :class="[
                    Number(item.maxOverRatio) >= 115 ? 'imgBox' : 'imgBox2',
                  ]"
                >
                  {{ item.areaName + ":" + item.overDevName }}
                </div>
                <div class="numBox">{{ item.maxOverTime }}</div>
              </div>
              <div class="textBox">
                {{
                  `限额${item.maxOverLimit} MW，潮流${item.maxOverPower}
                MW，负载率${item.maxOverRatio}%，请求调用${item.adjustDevName}储能资源`
                }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 静态地图容器 -->
    <!-- <div class="x-body">
      <div id="staticMap"></div>
      <div class="staticMapList">
        <ul>
          <li v-for="(item, i) in jsMapList" :key="i">
            <el-tag type="primary">{{ i + 1 }}</el-tag>
            <span class="name">{{ item.name }}</span>
            <span class="value">
              <el-progress
                :text-inside="true"
                :stroke-width="15"
                :percentage="Number(item.value)"
                text-color="#fff"
              ></el-progress>
            </span>
          </li>
        </ul>
      </div>
    </div> -->
  </div>
</template>

<script>
import * as echarts from "echarts";
import homeMap from "@/utils/home/home.map";
import mock from "@/utils/home/home.mockdata.js";
import mapJson from "@/utils/home/mapJson/jiangsu.json";
import {
  getBalanceMargin,
  getMapstanby,
  getFqgdmargin,
  getGjpass,
  overloadDevices,
  getAhZejShData,
  getFiveDirectCurrent,
  areaApplyInfo,
} from "@/api/index";
import { formatDate, getLast15Minutes, getCurrentDate } from "@/utils/index";
export default {
  name: "balance-province",
  data() {
    return {
      buttonType: 5,
      // myTimeData:this.formatDateMyTime(new Date()),
      // myTimeData: formatDate(new Date()).slice(0,10),
      myTimeData: "2024-07-05 16:00:00",
      timeNow: "00:00",
      timePincker: "",
      dateTimeX: [],
      anhuiNumber: 0,
      shanghaiNumber: 0,
      zhejiangNumber: 0,
      currentHour: 0,
      previousHour: 0,
      min: -96,
      max: 0, //00:00-24:00
      sliderValue: 0,
      customTooltipTop: "0%",
      showCustomTooltip: false,
      phydChart: undefined,
      phydChartOption_rq: {
        animationDuration: 3000,
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "6%",
          type: "plain",
          data: ["最大供电能力", "负荷预测", "最小供电能力"],
        },
        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["00:16", "05:00", "09:45", "14:30", "19:15", "24:00"],
          // data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "最大供电能力",
            type: "line",
            // data: [],
            data: [120, 132, 101, 134, 90, 230, 210],
            smooth: true,
            symbolSize: 0,
            // markLine: {
            //   symbol: ["none", "none"],
            //   label: { show: false },
            //   lineStyle: { color: "red" },
            //   data: [{ xAxis: 0 }, { xAxis: 1 }, { xAxis: 4 }],
            // },
          },
          {
            name: "负荷预测",
            type: "line",
            // data: [],
            data: [220, 182, 191, 234, 290, 330, 310],
            smooth: true,
            symbolSize: 0,
          },
          {
            name: "最小供电能力",
            type: "line",
            // data: [],
            data: [150, 232, 201, 154, 190, 330, 410],
            smooth: true,
            symbolSize: 0,
          },
        ],
      },
      phydChartOption_rn: {
        animationDuration: 3000,
        tooltip: {
          trigger: "axis",
          formatter: this.tooltipFormat,
        },
        legend: {
          top: "6%",
          type: "plain",
        },
        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["00:16", "05:00", "09:45", "14:30", "19:15", "24:00"],
          // data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "最大供电能力",
            type: "line",
            data: [120, 120, 101, 134, , ,],
            smooth: true,
            symbolSize: 0,
            // markLine: {
            //   symbol: ["none", "none"],
            //   label: { show: false },
            //   lineStyle: { color: "red" },
            //   data: [{ xAxis: 0 }, { xAxis: 1 }, { xAxis: 4 }],
            // },
          },
          // {
          //   name: "最大供电能力",
          //   type: "line",
          //   data: [, , , 134, 90, 230, 210],
          //   lineStyle: { type: "dashed" },
          //   smooth: true,
          //   symbolSize: 0,
          // },
          {
            name: "负荷预测",
            type: "line",
            data: [220, 182, 191, 234, , ,],
            smooth: true,
            symbolSize: 0,
          },
          // {
          //   name: "负荷预测",
          //   type: "line",
          //   data: [, , , 234, 290, 330, 310],
          //   smooth: true,
          //   lineStyle: { type: "dashed" },
          //   symbolSize: 0,
          // },
          {
            name: "最小供电能力",
            type: "line",
            data: [150, 232, 201, 154, , ,],
            smooth: true,
            symbolSize: 0,
          },
          // {
          //   name: "最小供电能力",
          //   type: "line",
          //   data: [, , , 154, 190, 330, 410],
          //   smooth: true,
          //   lineStyle: { type: "dashed" },
          //   symbolSize: 0,
          // },
        ],
      },
      //分区供电裕度第一个图表
      fqgdydChart1: undefined,
      fqgdydChart1Option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        title: {
          text: "最紧张供电裕度信息",
          left: "center",
          top: 20,
          textStyle: {
            fontSize: 14,
            color: "#2E393A",
          },
        },
        grid: {
          left: "3%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          // data: [
          //   "石牌分区 13:45",
          //   "访晋分区 14:00",
          //   "盐城南分区 17:15",
          //   "玉山分区 17:15",
          //   "扬州东分区 19:30",
          // ],
          data: [],
          axisLabel: {
            interval: 0, // 设置间隔显示
            margin: 10, // 设置文字与轴线的距离
            formatter: function (value) {
              // 自定义标签换行
              return value.split(" ").join("\n");
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          // axisLabel: {
          //   formatter: "{value}k",
          // },
        },
        series: [
          {
            // data: [],
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#92c9be" },
                { offset: 1, color: "#408d95" },
              ]),
            },
            barWidth: 20,
          },
        ],
      },
      //分区供电裕度第二个图表
      fqgdydChart2: undefined,
      fqgdydChart2Option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        title: {
          text: "分区供电裕度Top5",
          left: "center",
          top: 20,
          textStyle: {
            fontSize: 14,
            color: "#2E393A",
          },
        },
        grid: {
          left: "3%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          // data: [
          //   "石牌分区",
          //   "访晋分区",
          //   "盐城南分区",
          //   "玉山分区",
          //   "扬州东分区",
          // ],
          data: [],
          axisLabel: {
            interval: 0, // 设置间隔显示
            margin: 10, // 设置文字与轴线的距离
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          // axisLabel: {
          //   formatter: "{value}k",
          // },
        },
        series: [
          {
            data: [],
            // data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#92c9be" },
                { offset: 1, color: "#408d95" },
              ]),
            },
            barWidth: 20,
          },
        ],
      },
      //过江通道
      gjtd_echarts: undefined,
      gjtd_echartsOption_rq: {
        animationDuration: 3000,
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "6%",
          type: "plain",
          data: ["最大输送能力", "最小输送需求", "最大输送需求"],
        },
        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
          // data: ["00:15", "05:00", "09:45", "14:30", "19:15", "24:00"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "最大输送能力",
            type: "line",
            data: [],
            smooth: true,
            symbolSize: 0,
          },
          {
            name: "最小输送需求",
            type: "line",
            data: [],
            smooth: true,
            symbolSize: 0,
          },
          {
            name: "最大输送需求",
            type: "line",
            data: [],
            smooth: true,
            symbolSize: 0,
          },
        ],
      },
      gjtd_echartsOption_rn: {
        animationDuration: 3000,
        tooltip: {
          trigger: "axis",
          formatter: this.tooltipFormat,
        },
        legend: {
          top: "6%",
          type: "plain",
        },
        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "最大输送能力",
            type: "line",
            data: [],
            // data: [200, 332, 301, 334, , ,],
            smooth: true,
            symbolSize: 0,
          },
          // {
          //   name: "最大输送能力",
          //   type: "line",
          //   data: [, , , 334, 290, 330, 310],
          //   lineStyle: { type: "dashed" },
          //   smooth: true,
          //   symbolSize: 0,
          // },
          {
            name: "最小输送需求",
            type: "line",
            data: [],
            // data: [120, 182, 191, 194, , ,],
            smooth: true,
            symbolSize: 0,
          },
          // {
          //   name: "最小输送需求",
          //   type: "line",
          //   data: [, , , 194, 190, 230, 210],
          //   lineStyle: { type: "dashed" },
          //   smooth: true,
          //   symbolSize: 0,
          // },
          {
            name: "最大输送需求",
            type: "line",
            data: [],
            // data: [250, 232, 201, 254, , ,],
            smooth: true,
            symbolSize: 0,
          },
          // {
          //   name: "最大输送需求",
          //   type: "line",
          //   data: [, , , 254, 290, 250, 230],
          //   lineStyle: { type: "dashed" },
          //   smooth: true,
          //   symbolSize: 0,
          // },
        ],
      },
      progressList: [
        { name: "秋藤-秦淮", value: 1447, total: 3000, percent: 50 },
        { name: "江都-梦溪", value: 2117, total: 3200, percent: 75 },
        { name: "泰兴-斗山", value: 1154, total: 8000, percent: 25 },
        { name: "三叉湾-龙王山", value: 1474, total: 3000, percent: 50 },
        { name: "泰州-东吴", value: 5231, total: 5900, percent: 88 },
        { name: "凤城-梅里", value: 2811, total: 3000, percent: 82 },
        { name: "少游-金东", value: 0, total: 0, percent: 0 },
      ],

      timeLineList: mock.resource_timelineList,
      mapInfo: {
        maxpower: 109812,
        min1: 2020,
        min2: 1822,
        positive: 674,
        nagetive: 388,
        time: "",
      },
      mapLegend: [
        { text: "直流±800kV", img: "zhi1" },
        { text: "直流±500kV", img: "zhi0" },
        { text: "直流±200kV", img: "zhi2" },
        { text: "交流±1000kV", img: "jiao0" },
        { text: "直流±500kV", img: "jiao1" },
        { text: "设备过载", img: "guozai" },
        { text: "上下可调能力", img: "updown" },
        { text: "新能源", img: "energy" },
        { text: "断面", img: "duanmian" },
      ],
      mapChart: undefined,
      mapChartOption: {
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
        },
        // grid: {
        //   left: "0%", // 控制图表左边距
        //   right: "0%", // 控制图表右边距
        //   top: "0%", // 控制图表上边距
        //   bottom: "0%", // 控制图表下边距
        // },
        /*visualMap:[ {
          seriesIndex:1,
          // 设置地图范围值显示的颜色
          selectedMode: false, // 不能选择
          hoverLink: false, // 取消鼠标移入效果
          textStyle: {
            color: '#000'
          },
          align: 'left',
          itemGap: 20,
          pieces: [
            {
              gt: 500,
              lte: 800,
              label: '直流+800KW',
              color: '#7e021f',
              //symbolSize:[30,40],
              symbol:'image://'+require('@/assets/images/zhi1.png')
            },
            {
              gt: 200,
              lte: 500,
              label: '直流+500kW',
              color: '#d54063',
             // symbolSize:[30,40],
              symbol:'image://'+require('@/assets/images/zhi0.png')
            },
            {
              gt: 0,
              lte: 200,
              label: '直流+200kW',
              color: '#f1b724',
              //symbolSize:[30,40],
              symbol:'image://'+require('@/assets/images/zhi2.png')
            }
          ],
          left: 20,
          bottom: 20
        }
        ],*/
        series: [
          {
            // left: "0%", // 控制图表左边距
            // right: "0%", // 控制图表右边距
            // top: "0%", // 控制图表上边距
            // bottom: "0%", // 控制图表下边距
            name: "平衡分析详情",
            type: "map",
            z: 1,
            map: "jiangsu",
            label: {
              show: true,
              color: "#ffffff",
            },
            labelLine: {
              show: true,
              length: 15,
              length2: 10,
              minTurnAngle: 90,
              maxSurfaceAngle: 180,
              lineStyle: {
                type: "dashed",
                cap: "round",
              },
              /*length: 15,
              length2: 10,
              maxSurfaceAngle: 80*/
            },
            itemStyle: {
              // 静态的时候显示的默认样式
              borderWidth: 1, // 边框宽度
              areaColor: {
                type: "linear",
                x: 0.5,
                y: 0.5,
                r: 0.9,
                colorStops: [
                  {
                    offset: 0,
                    color: "#59bcc2", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#82CBBE", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              borderColor: "#ffffff", // 边框颜色

              emphasis: {
                itemStyle: {
                  // 鼠标移入动态的时候显示的默认样式
                  borderWidth: 2, // 边框宽度
                  areaColor: "#0979A9", // 地图颜色
                },
              },
            },
            data: [],
          },
        ],
        geo: {
          geoIndex: 1,
          map: "jiangsu",
          label: {
            show: false,
          },
          zoom: 1,
        },
      },

      //一些地图中心点
      mapData1: [],

      pointOptData: [],

      params: {
        dateType: this.$store.state.home.riNeiOrQian,
        // dateTime: formatDate(new Date()),
        dateTime: "2024-07-05 16:00:00",
        // dateTime:JSON.parse(sessionStorage.getItem('changeTime')),
      },
      // rnParams1: {},
      zlCoords: [],

      areaApplyInfoList: [],

      newMsg: "",
    };
  },
  computed: {
    customTooltipText() {
      let hour = ("00" + Math.floor(Math.abs(this.sliderValue) / 4)).slice(-2);
      let mm = ("00" + (Math.abs(this.sliderValue) % 4) * 15).slice(-2);
      return `${hour}:${mm}`;
    },
    riNeiOrQian: {
      get() {
        // return this.$store.state.home.riNeiOrQian;
        return "yesterday";
      },
    },
  },

  watch: {
    riNeiOrQian: {
      //deep:true,//监听对象深度监听
      immediate: true, //立即监听
      handler(newVal, oldVal) {
        if (newVal == "nowday") {
          this.timeLineList = mock.resource_timelineList_rn;
        } else if (newVal == "yesterday") {
          this.timeLineList = mock.resource_timelineList;
        }
      },
    },
  },

  created() {
    // let { currentHour, previousHour } = this.getCurrentHour();
    this.currentHour = new Date().getHours();
    // this.previousHour = previousHour;

    // this.ceshiAlert
    // let aaa = getLast15Minutes(new Date());
    // let bbb = formatDate(aaa);
    // console.log(bbb, 1111111111111);

    if (this.$store.state.home.riNeiOrQian === "nowday") {
      this.params = {
        dateType: this.$store.state.home.riNeiOrQian,
        // dateTime: formatDate(new Date()),
        dateTime: "2024-07-05 16:00:00",
      };
    } else {
      this.params = {
        dateType: this.$store.state.home.riNeiOrQian,
        // dateTime:  formatDate(new Date())
        dateTime: "2024-07-05 16:00:00",
        // dateTime: "2024-07-05 12:00:00",
      };
    }

    console.log(this.params, "this.params");
    // this.rnParams1 = {
    //   dateType: this.$store.state.home.riNeiOrQian,
    //   dataTime: formatDate(),
    // };
    // let last15Time = getLast15Minutes(new Date()).toLocaleTimeString();
    // this.customTooltipText = last15Time.slice(0, 5);
    // 调用函数获取当前日期并输出
    // let currentDate = getCurrentDate();
    // let Params = {
    //   dateType: this.$store.state.home.riNeiOrQian,
    //   dateTime: "2024-07-05 12:00:00",
    //   // dateTime: formatDate(Date.now()),
    // };
    // let Params1 = {
    //   dateType: this.$store.state.home.riNeiOrQian,
    //   dateTime: "2024-07-06 12:00:00",
    //   // dateTime: formatDate(Date.now()),
    // };

    // let rqParams = {
    //   dateType: this.$store.state.home.riNeiOrQian,
    //   // dateTime: formatDate(Date.now()),
    //   dateTime: "2024-07-06 12:00:00",
    // };

    //生成X时间轴

    for (let i = 0; i < 24; i++) {
      let a;
      if (i < 10) {
        a = "0" + i;
      } else {
        a = i.toString();
      }
      for (let j = 1; j < 5; j++) {
        let b = (j * 15).toString();
        if (b === "60") {
          a =
            i < 10
              ? "0" + (Number(a) + 1).toString()
              : (Number(a) + 1).toString();
          b = "00";
        }
        this.dateTimeX.push(a + ":" + b);
      }
    }
    //平衡裕度接口
    this.balanceMargin();
    // 正备用、负备用
    this.mapstanby();
    //分区供电裕度
    this.fqgdmargin();
    // 渲染过江通道echarts
    this.gjpass();
    // 设备过载个数
    this.getOverloadDevices();
    //地区需求信息
    this.getAreaApplyInfo();
    //安徽浙江上海
    this.getMyAhZejShData();
    // // 可调节资源
    // this.uesMygetAdjustableResources()
  },
  mounted() {
    //初始化时间标签
    const now = new Date();
    const hour = now.getHours();
    const minutes = now.getMinutes();
    this.sliderValue = -Math.floor((hour * 60 + minutes) / 15);

    this.phydChart = echarts.init(this.$refs.phydChart);
    if (this.$store.state.home.riNeiOrQian == "nowday") {
      this.phydChartOption_rn &&
        this.phydChart.setOption(this.phydChartOption_rn);
    } else {
      this.phydChartOption_rq &&
        this.phydChart.setOption(this.phydChartOption_rq);
    }
    //分区供电裕度
    this.fqgdydChart1 = echarts.init(this.$refs.fqgdydChart1);
    this.fqgdydChart1Option &&
      this.fqgdydChart1.setOption(this.fqgdydChart1Option);

    this.fqgdydChart2 = echarts.init(this.$refs.fqgdydChart2);
    this.fqgdydChart2Option.title.text =
      this.customTooltipText + "分区供电裕度Top5";
    this.mapInfo.time = this.customTooltipText;
    this.$forceUpdate();
    this.fqgdydChart2Option &&
      this.fqgdydChart2.setOption(this.fqgdydChart2Option);

    //过江能力初始化
    this.gjtd_echarts = echarts.init(this.$refs.gjtd_echartsRef);
    this.gjtd_echartsOption_rq &&
      this.gjtd_echarts.setOption(this.gjtd_echartsOption_rq);
    if (this.$store.state.home.riNeiOrQian == "nowday") {
      this.gjtd_echartsOption_rn &&
        this.gjtd_echarts.setOption(this.gjtd_echartsOption_rn);
    } else {
      this.gjtd_echartsOption_rq &&
        this.gjtd_echarts.setOption(this.gjtd_echartsOption_rq);
    }
    //地图
    echarts.registerMap("jiangsu", mapJson);
    this.mapChart = echarts.init(this.$refs.map);
    //点击事件 地图下钻
    this.mapChart.on("click", (params) => {
      if (params.seriesIndex == 0) {
        //点击地图区块才触发下钻事件，点线不触发
        this.$store.commit("home/setMapLevel", "2");
        this.$store.commit("home/setMapName", params.name);
        this.$store.commit("home/setMapCity", homeMap.citys[params.name]);
        this.$emit("balance-reload"); //触发重新加载页面
      }
    });

    this.convertLineData();
  },

  methods: {
    // getCurrentHour() {
    //   const currentTime = new Date();
    //   const currentHour = new Date().getHours();
    //   const previousHour = currentHour === 0 ? 23 : currentHour - 1;
    //   return {
    //     currentHour,
    //     previousHour,
    //   };
    // },

    // 点击事件线触发的方法
    // clickTimeLineEvt(index) {
    //   // console.log(it,'88888');
    //   console.log(index);
    //   this.currentHour = index;
    // },

    // 处理可调节资源 返回值的方法
    removeRegion(data) {
      return data.map((item) => {
        const { region, ...rest } = item;
        return rest;
      });
    },

    // 可调节资源
    uesMygetAdjustableResources() {
      let areaApplyInfoParams = {
        caseType: this.$store.state.home.riNeiOrQian === "nowday" ? 0 : 20,
        dateTime: this.params.dateTime,
      };
      getAdjustableResources(areaApplyInfoParams).then((res) => {
        if (res.code !== 200) return;
      });
    },

    formatDateMyTime(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },

    // 增加日期的方法
    addOneDay(dateTimeString) {
      const dateTime = new Date(dateTimeString);
      const nextDay = new Date(dateTime.getTime() + 24 * 60 * 60 * 1000);

      // 处理闰年情况
      if (nextDay.getDate() === 1 && nextDay.getMonth() === 0) {
        nextDay.setFullYear(nextDay.getFullYear(), 1, 1);
      }
      return nextDay.toISOString().slice(0, 19).replace("T", " ");
    },

    // 格式化时间的方法
    formatDate(dateString) {
      const date = new Date(dateString);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
        2,
        "0"
      )}-${String(date.getDate()).padStart(2, "0")}`;
    },

    timePickerEvt(v) {
      console.log(this.myTimeData, "看时机");

      (this.myTimeData = formatDate(this.myTimeData).slice(0, 10)),
        // this.timePincker = this.formatDate(v)
        // console.log( this.timePincker ,'v,看一眼v的数据');
        // // sessionStorage.setItem('changeTime', JSON.stringify(myTime))
        (this.params.dateTime = this.myTimeData + " " + "00:00" + ":00");
      this.mapstanby();
      this.fqgdmargin();
      this.gjpass();
      this.getAreaApplyInfo();
      this.convertLineData();
    },

    convertTimeToDateTime(timeStr) {
      // 拆分时间字符串
      const [hours, minutes] = timeStr.split(":").map(Number);
      // 创建指定日期的 Date 对象
      const dateTime = new Date(2024, 6, 5, hours, minutes, 0);
      // 格式化输出
      return dateTime.toISOString().slice(0, 19).replace("T", " ");
    },

    getMyAhZejShData() {
      // caseType: this.$store.state.home.riNeiOrQian === "nowday" ? 0 : 20,
      // dateTime: this.params.dateTime,
      let Params2 = {
        dateType: this.$store.state.home.riNeiOrQian,
        dateTime: this.params.dateTime,
        // dateTime: formatDate(Date.now()),
        // dateTime: "2024-07-05",
      };
      // Params2.dateTime = this.params.dateTime
      getAhZejShData(Params2).then((res) => {
        if (res.code !== 200) return;
        this.shanghaiNumber = res.data.shval;
        this.zhejiangNumber = res.data.zjval;
        this.anhuiNumber = res.data.ahval;
      });
    },

    watchSessionStorageChange(callback, ...args) {
      // 保存初始时的changeTime数据
      let initialValue = sessionStorage.getItem("changeTime");
      // 使用addEventListener监听storage事件
      window.addEventListener("storage", function (event) {
        // event.key 是发生变化的属性名
        // event.newValue 是变化后的值
        if (event.key === "changeTime" && event.newValue !== initialValue) {
          // 如果变化的是changeTime，并且新值与初始值不同，则执行回调函数，并传入参数
          callback(...args);
          // 更新初始值为最新值，以便下次比较
          initialValue = event.newValue;
        }
      });
    },

    // 修改时间后触发的方法
    changeTimeEvt(it, time, buttonType, index) {
      console.log(it, "777777777777");
      this.buttonType = buttonType;
      this.currentHour = index;
      // console.log(this.buttonType, buttonType ,'999999');
      this.timeNow = this.addMinutesToTime(it.timestamp, time);
      // 这里更新数据
      console.log(this.timeNow, "看一眼值");
      if (this.timeNow == "24:00") {
        let newTimeData =
          this.addOneDay(this.myTimeData).slice(0, 10) + " 00:00:00";
        // console.log(this.myTimeData);
        this.params.dateTime = newTimeData;
      } else {
        this.params.dateTime =
          this.myTimeData.slice(0, 10) + " " + this.timeNow + ":00";
      }

      // 这里用来更新数据
      // this.params.dateTime = this.convertTimeToDateTime(timeNow)

      this.mapstanby();
      this.fqgdmargin();
      this.gjpass();
      this.getAreaApplyInfo();
      this.getMyAhZejShData();
      this.convertLineData();
    },

    // 拼接时间的方法
    addMinutesToTime(timeStr, minutes) {
      // 将时间字符串拆分成小时和分钟部分
      const [hours, minutesStr] = timeStr.split(":");
      const minutesNum = parseInt(minutesStr, 10);
      // 将分钟部分加上 30 分钟
      const newMinutes = (minutesNum + minutes) % 60;
      // 计算新的小时部分
      const newHours =
        parseInt((minutesNum + minutes) / 60, 10) + parseInt(hours, 10);
      // 将更新后的小时和分钟部分重新拼接成新的时间字符串
      return `${String(newHours).padStart(2, "0")}:${String(
        newMinutes
      ).padStart(2, "0")}`;
    },

    //平衡裕度接口
    balanceMargin() {
      getBalanceMargin(this.params).then((res) => {
        this.phydChartOption_rq.xAxis.data = this.dateTimeX;
        this.phydChartOption_rn.xAxis.data = this.dateTimeX;

        if (this.$store.state.home.riNeiOrQian == "nowday") {
          this.phydChartOption_rn.series[0].data = res.data.maxgdnl.data;
          this.phydChartOption_rn.series[1].data = res.data.fhyc.data;
          this.phydChartOption_rn.series[2].data = res.data.mingdnl.data;
        } else {
          this.phydChartOption_rq.series[0].data = res.data.maxgdnl.data;
          this.phydChartOption_rq.series[1].data = res.data.fhyc.data;
          this.phydChartOption_rq.series[2].data = res.data.mingdnl.data;
        }

        if (this.$store.state.home.riNeiOrQian == "nowday") {
          this.phydChartOption_rn &&
            this.phydChart.setOption(this.phydChartOption_rn);
        } else {
          this.phydChartOption_rq &&
            this.phydChart.setOption(this.phydChartOption_rq);
        }
      });
      console.log(this.phydChartOption_rn, "this.phydChartOption_rn9999999");
    },

    // 正备用、负备用
    mapstanby() {
      getMapstanby(this.params).then((res) => {
        if (res.code !== 200) return this.$message.error(res.msg);
        this.mapInfo = res.data;

        // this.mapInfo.minfby =  res.data
        // if(!this.mapInfo.minfby == null) this.mapInfo.minfby = '未知'
        // if(!this.mapInfo.minzby) this.mapInfo.minzby = '未知'
        // if(!this.mapInfo.maxfh) this.mapInfo.maxfh = '未知'
        // if(!this.mapInfo.zby) this.mapInfo.zby = '未知'
        // if(!this.mapInfo.fby) this.mapInfo.fby = '未知'

        //   this.mapInfo =  {
        //   maxpower: 99999999,
        //   min1: 99999999,
        //   min2: 99999999,
        //   positive: 99999999,
        //   nagetive: 99999999,
        //   time: "",
        // }
      });
    },

    //分区供电裕度
    fqgdmargin() {
      getFqgdmargin(this.params).then((res) => {
        if (res.code !== 200) return this.$message.error(res.msg);
        let xAxisData1 = [];
        let yAxisData1 = [];
        res.data.zjzinfos.forEach((p) => {
          xAxisData1.push(p.name);
          yAxisData1.push(p.val);
        });
        this.fqgdydChart1Option.xAxis.data = xAxisData1;
        this.fqgdydChart1Option.series[0].data = yAxisData1;

        let xAxisData2 = [];
        let yAxisData2 = [];
        res.data.top5.forEach((p) => {
          xAxisData2.push(p.name);
          yAxisData2.push(p.val);
        });
        this.fqgdydChart2Option.xAxis.data = xAxisData2;
        this.fqgdydChart2Option.series[0].data = yAxisData2;

        this.fqgdydChart1 = echarts.init(this.$refs.fqgdydChart1);
        this.fqgdydChart1Option &&
          this.fqgdydChart1.setOption(this.fqgdydChart1Option);

        this.fqgdydChart2 = echarts.init(this.$refs.fqgdydChart2);
        this.fqgdydChart2Option.title.text =
          this.customTooltipText + "分区供电裕度Top5";
        this.mapInfo.time = this.customTooltipText;
        // this.$forceUpdate();
        this.fqgdydChart2Option &&
          this.fqgdydChart2.setOption(this.fqgdydChart2Option);
      });
    },

    //过江通道
    gjpass() {
      getGjpass(this.params).then((res) => {
        if (res.code !== 200) return this.$message.error(res.msg);
        // 最大输送能力
        let my_maxssnl = [];
        res.data.maxssnls.forEach((it) => {
          my_maxssnl.push(it.val);
        });
        // 最大输送需求
        let my_maxssxq = [];
        res.data.maxssxqs.forEach((it) => {
          my_maxssxq.push(it.val);
        });
        // 最小输送需求
        let my_minssxq = [];
        res.data.minssxqs.forEach((it) => {
          my_minssxq.push(it.val);
        });
        this.gjtd_echarts = echarts.init(this.$refs.gjtd_echartsRef);
        this.gjtd_echartsOption_rq &&
          this.gjtd_echarts.setOption(this.gjtd_echartsOption_rq);

        if (this.$store.state.home.riNeiOrQian == "nowday") {
          this.gjtd_echartsOption_rn.series[0].data = my_maxssnl;
          this.gjtd_echartsOption_rn.series[1].data = my_minssxq;
          this.gjtd_echartsOption_rn.series[2].data = my_maxssxq;
          this.gjtd_echartsOption_rn.xAxis.data = this.dateTimeX;
          this.gjtd_echartsOption_rn &&
            this.gjtd_echarts.setOption(this.gjtd_echartsOption_rn);
        } else {
          this.gjtd_echartsOption_rq.series[0].data = my_maxssnl;
          this.gjtd_echartsOption_rq.series[1].data = my_minssxq;
          this.gjtd_echartsOption_rq.series[2].data = my_maxssxq;
          this.gjtd_echartsOption_rq.xAxis.data = this.dateTimeX;
          this.gjtd_echartsOption_rq &&
            this.gjtd_echarts.setOption(this.gjtd_echartsOption_rq);
        }

        // 按照这个数组的顺序对返回值 limitv ，currentv 进行排序
        let sortArray = [
          "秋藤-秦淮",
          "江都-梦溪",
          "泰兴-斗山",
          "三叉湾-龙王山",
          "泰州-东吴",
          "凤城-梅里",
          "江都-梦溪",
        ];

        res.data.limitv.sort((a, b) => {
          return sortArray.indexOf(a.name) - sortArray.indexOf(b.name);
        });

        res.data.currentv.sort((a, b) => {
          return sortArray.indexOf(a.name) - sortArray.indexOf(b.name);
        });

        // console.log(res.data.limitv , '00');
        // console.log(res.data.currentv  , '00');

        // 使用 for 循环
        if (res.data.currentv.length == 0) return;

        for (let i = 0; i < 6; i++) {
          this.progressList[i].total =
            // Number(res.data.currentv[i].val).toFixed(2) * 1 +
            Number(res.data.limitv[i].val).toFixed(2) * 1;
          this.progressList[i].value = Number(res.data.currentv[i].val).toFixed(
            0
          );
          this.progressList[i].percent =
            (
              (this.progressList[i].value / this.progressList[i].total) *
              100
            ).toFixed(2) * 1;
        }
      });
    },

    //地区需求信息
    getAreaApplyInfo() {
      let areaApplyInfoParams = {
        caseType: this.$store.state.home.riNeiOrQian === "nowday" ? 0 : 20,
        dateTime: this.params.dateTime,
      };
      areaApplyInfo(areaApplyInfoParams).then((res) => {
        if (res.code !== 200) return this.$message.error(res.msg);
        this.areaApplyInfoList = res.data;
        this.areaApplyInfoList.forEach((item) => {
          item.maxOverLimit = Number(item.maxOverLimit).toFixed(2);
          item.maxOverRatio = Number(item.maxOverRatio * 100).toFixed(2);
          item.maxOverPower = Number(item.maxOverPower).toFixed(2);
        });
        this.newMsg = `${res.data[0].areaName}${res.data[0].overDevName}过载，请求调用${res.data[0].adjustDevName}储能资源`;
        console.log(this.areaApplyInfoList, 222);
      });
    },

    // 设备过载个数
    getOverloadDevices() {
      let overloadDevicesParams = {
        dateTime: this.params.dateTime,
        caseType: this.$store.state.home.riNeiOrQian === "nowday" ? 0 : 20,
      };
      overloadDevices(overloadDevicesParams).then((res) => {
        if (res.code !== 200) return this.$message.error(res.msg);
        // this.mapData1 = [];
        res.data.forEach((item) => {
          if (!item.areaName.includes("市")) {
            item.areaName = item.areaName + "市";
          }
          this.mapData1.push({
            name: item.areaName,
            img: "guozai",
            num: item.overLimitCount,
          });
        });
        // console.log(this.mapData1, "this.mapData1");
        this.dotOnMap();
      });
    },

    handleSliderInput(val) {
      this.sliderValue = val;
      this.sliderPosition();
    },
    handleSliderChange(val) {
      //加载数据
      this.mapInfo.time = this.customTooltipText;
      this.fqgdydChart2.clear();
      this.fqgdydChart2Option.title.text =
        this.customTooltipText + "分区供电裕度Top5";
      this.$forceUpdate();
      this.fqgdydChart2Option &&
        this.fqgdydChart2.setOption(this.fqgdydChart2Option);

      //过江通道进度条数据更新
      console.log(this.customTooltipText, "看时间");
      console.log("11111111");

      // 这边来调用接口进行数据更新
    },

    sliderPosition() {
      /*const tooltipPosition =
          ((Math.abs(this.sliderValue) / 96) * 100).toFixed(2)*/
      const tooltipPosition = (Math.abs(this.sliderValue) / 96) * 720; //因为el-slider的高度是720
      this.customTooltipTop = `calc(${tooltipPosition}px - 6px)`; //减去黑点的1/2高度
      this.showCustomTooltip = true;
    },
    tooltipFormat(params) {
      let htmlStr = "";
      const valMap = {};
      for (let i = 0; i < params.length; i++) {
        const param = params[i];
        const xName = param.name; //x轴的名称
        const seriesName = param.seriesName; //图例名称
        const value = param.value; //y轴值
        const color = param.color; //图例颜色
        //类目名
        if (i === 0) {
          htmlStr += xName + "<br/>"; //x轴的名称
        }
        //过滤无效值
        if (!value || value === "-") {
          continue;
        }
        //过滤重叠值
        if (valMap[seriesName] == value) {
          continue;
        }
        htmlStr += "<div>";
        //和原来的效果一样
        htmlStr +=
          '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
          color +
          ';"></span>';
        //圆点后面显示的文本
        htmlStr +=
          seriesName +
          "：" +
          '<span style="font-weight: bold">' +
          value +
          "</span>";
        htmlStr += "</div>";
        // 存储重复数据
        valMap[seriesName] = value;
      }
      return htmlStr;
    },

    convertImgData() {
      //一些地图中心点

      let resDatas = [];
      for (let i = 0; i < mapJson.features.length; i++) {
        let tmpItem = this.mapData1.find(
          (x) => x.name == mapJson.features[i].properties.name
        );
        // console.log(tmpItem, 77777777);
        let resItem = {};
        if (tmpItem) {
          resItem.name = tmpItem.name;
          if (tmpItem.img === "guozai") {
            // console.log("pppppppppp");
            resItem.value = mapJson.features[i].properties.center.concat(
              tmpItem.num || 0
            );
          } else {
            resItem.value = mapJson.features[i].properties.center.concat(22);
          }

          resItem.symbol =
            "image://" + require("@/assets/images/" + tmpItem.img + ".png");
          resItem.symbolSize = 25;
          if (tmpItem.img == "guozai") {
            resItem.label = {
              formatter: "{@[2]}",
              position: "right",
              show: true,
              color: "#f1374c",
            };
          }
          if (tmpItem.img == "updown") {
            resItem.label = {
              formatter: "{@[2]}",
              position: "right",
              show: true,
              color: "#0b83c8",
            };
          }
          resDatas.push(resItem);
        }
      }
      //一些地市点
      let mapData2 = [
        {
          name: "盱眙",
          value: [118.8, 33.0, 100],
          symbol: "image://" + require("@/assets/images/jiao0.png"),
          symbolSize: 15,
          label: { formatter: "{b}", position: "right", show: true },
        },
        {
          name: "泰州",
          value: [120.115269, 32.681457, 100],
          symbol: "image://" + require("@/assets/images/jiao0.png"),
          symbolSize: 15,
          label: { formatter: "{b}", position: "right", show: true },
        },
        {
          name: "东吴",
          value: [120.846525, 31.491708, 100],
          symbol: "image://" + require("@/assets/images/jiao0.png"),
          symbolSize: 15,
          label: { formatter: "{b}", position: "right", show: true },
        },
        {
          name: "江都",
          value: [119.4, 32.8, 100],
          symbol: "image://" + require("@/assets/images/jiao1.png"),
          symbolSize: 15,
          label: { formatter: "{b}", position: "right", show: true },
        },
        {
          name: "梦溪",
          value: [119.257901, 31.868853, 100],
          symbol: "image://" + require("@/assets/images/jiao1.png"),
          symbolSize: 15,
          label: { formatter: "{b}", position: "bottom", show: true },
        },
        {
          name: "少游",
          value: [119.675102, 32.827712, 100],
          symbol: "image://" + require("@/assets/images/zhi1.png"),
          symbolSize: 15,
          label: { formatter: "{b}", position: "right", show: true },
        },
        {
          name: "金东",
          value: [119.599515, 32.023198, 100],
          symbol: "image://" + require("@/assets/images/zhi1.png"),
          symbolSize: 15,
          label: { formatter: "{b}", position: "bottom", show: true },
        },
        {
          name: "金湖",
          value: [119.132127, 32.968602, 100],
          symbol: "image://" + require("@/assets/images/jiao1.png"),
          symbolSize: 15,
          label: { formatter: "{b}", position: "right", show: true },
        },
        {
          name: "秦淮",
          value: [118.83663, 32.151097, 100],
          symbol: "image://" + require("@/assets/images/jiao1.png"),
          symbolSize: 15,
          label: { formatter: "{b}", position: "right", show: true },
        },
        {
          name: "秋藤",
          value: [118.44424, 32.93564, 100],
          symbol: "image://" + require("@/assets/images/jiao1.png"),
          symbolSize: 15,
          label: { formatter: "{b}", position: "left", show: true },
        },
        {
          name: "龙王山",
          value: [118.739181, 31.771647, 100],
          symbol: "image://" + require("@/assets/images/jiao1.png"),
          symbolSize: 15,
          label: { formatter: "{b}", position: "left", show: true },
        },
        {
          name: "三汊湾",
          value: [118.885785, 32.568746, 100],
          symbol: "image://" + require("@/assets/images/jiao1.png"),
          symbolSize: 15,
          label: { formatter: "{b}", position: "top", show: true },
        },
        {
          name: "梅里",
          value: [120.389297, 31.500041, 100],
          symbol: "image://" + require("@/assets/images/jiao1.png"),
          symbolSize: 15,
          label: { formatter: "{b}", position: "right", show: true },
        },
        {
          name: "凤城",
          value: [120.041105, 32.506239, 100],
          symbol: "image://" + require("@/assets/images/jiao1.png"),
          symbolSize: 15,
          label: { formatter: "{b}", position: "right", show: true },
        },
        {
          name: "斗山",
          value: [120.089297, 31.9, 100],
          symbol: "image://" + require("@/assets/images/jiao1.png"),
          symbolSize: 15,
          label: { formatter: "{b}", position: "left", show: true },
        },
        {
          name: "泰兴",
          value: [119.941105, 32.406239, 100],
          symbol: "image://" + require("@/assets/images/jiao1.png"),
          symbolSize: 15,
          label: { formatter: "{b}", position: "left", show: true },
        },
      ];
      resDatas = resDatas.concat(mapData2);
      return resDatas;
    },
    //五大直流
    convertLineData() {
      // this.toGetFiveDirectCurrent();
      //五大直流
      getFiveDirectCurrent(this.params).then((res) => {
        this.zlCoords = [
          {
            name: "雁淮直流",
            coords: [
              [118.971034, 33.352326],
              [115.971034, 33.352326],
            ],
            symbol: "",
            symbolSize: 15,
            img: "zhi1",
            zhi: 1,
            lineStyle: {
              width: 1.5,
              type: "solid",
              opacity: 1,
              color: "#f80c43",
            },
          },
          {
            name: "锡泰直流",
            coords: [
              [119.9, 33.052326],
              [115.971034, 33.052326],
            ],
            symbol: "",
            symbolSize: 15,
            img: "zhi1",
            zhi: 0,
            lineStyle: {
              width: 1.5,
              type: "solid",
              opacity: 1,
              color: "#f80c43",
            },
          },
          {
            name: "建苏直流",
            coords: [
              [120.5, 31.95],
              [115.971034, 31.95],
            ],
            symbol: "",
            symbolSize: 15,
            img: "zhi1",
            zhi: 5595.3,
            lineStyle: {
              width: 1.5,
              type: "solid",
              opacity: 1,
              color: "#f80c43",
            },
          },
          {
            name: "锦苏直流",
            coords: [
              [120.8, 31.55],
              [115.971034, 31.55],
            ],
            symbol: "",
            symbolSize: 15,
            img: "zhi1",
            zhi: 5536.12,
            lineStyle: {
              width: 1.5,
              type: "solid",
              opacity: 1,
              color: "#f80c43",
            },
          },
          {
            name: "龙政直流",
            coords: [
              [119.4, 31.3],
              [115.971034, 31.3],
            ],
            symbol: "",
            symbolSize: 15,
            img: "zhi0",
            zhi: 2009.88,
            lineStyle: {
              width: 1.5,
              type: "solid",
              opacity: 1,
              color: "#da75d0",
            },
          },
        ];

        this.zlCoords[0].zhi = res.data.yzhl || 0;
        this.zlCoords[1].zhi = res.data.xtaizl || 0;
        this.zlCoords[2].zhi = res.data.jiansuzl || 0;
        this.zlCoords[3].zhi = res.data.jinsuzl || 0;
        this.zlCoords[4].zhi = res.data.lzzl || 0;

        this.zlCoords.forEach((p) => {
          p.symbol = "image://" + require("@/assets/images/" + p.img + ".png");
        });

        let resDatas = [];
        //一些地图内线
        let mapdata2 = [
          {
            name: "泰州-东吴",
            symbolSize: [0, 0],
            coords: [
              [120.115269, 32.681457],
              [120.846525, 31.491708],
            ],
            lineStyle: {
              width: 1.5,
              type: "solid",
              opacity: 1,
              color: "#eee327",
            },
          },
          {
            name: "少游-金东",
            symbolSize: [0, 0],
            coords: [
              [119.675102, 32.827712],
              [119.599515, 32.023198],
            ],
            lineStyle: {
              width: 1.5,
              type: "solid",
              opacity: 1,
              color: "#cd6302",
            },
          },
          {
            name: "泰州-盱眙",
            symbolSize: [0, 0],
            coords: [
              [120.115269, 32.681457],
              [118.8, 33.0, 100],
            ],
            lineStyle: {
              width: 1.5,
              type: "solid",
              opacity: 1,
              color: "#eee327",
            },
          },
          {
            name: "秋藤-秦淮",
            symbolSize: [0, 0],
            coords: [
              [118.44424, 32.93564],
              [118.83663, 32.151097],
            ],
            lineStyle: {
              width: 1.5,
              type: "solid",
              opacity: 1,
              color: "#0b83c8",
            },
          },
          {
            name: "江都-梦溪",
            symbolSize: [0, 0],
            coords: [
              [119.4, 32.8, 100],
              [119.257901, 31.868853],
            ],
            lineStyle: {
              width: 1.5,
              type: "solid",
              opacity: 1,
              color: "#0b83c8",
            },
          },
          {
            name: "龙王山-三汊湾",
            symbolSize: [0, 0],
            coords: [
              [118.739181, 31.771647],
              [118.885785, 32.568746],
            ],
            lineStyle: {
              width: 1.5,
              type: "solid",
              opacity: 1,
              color: "#0b83c8",
            },
          },
          {
            name: "凤城-梅里",
            symbolSize: [0, 0],
            coords: [
              [120.041105, 32.506239],
              [120.389297, 31.500041],
            ],
            lineStyle: {
              width: 1.5,
              type: "solid",
              opacity: 1,
              color: "#0b83c8",
            },
          },
          {
            name: "泰兴-斗山",
            symbolSize: [0, 0],
            coords: [
              [119.941105, 32.406239, 100],
              [120.089297, 31.9, 100],
            ],
            lineStyle: {
              width: 1.5,
              type: "solid",
              opacity: 1,
              color: "#0b83c8",
            },
          },
        ];
        resDatas = [...resDatas, ...this.zlCoords, ...mapdata2];

        let opt = {
          type: "lines",
          z: 3,
          coordinateSystem: "geo",
          //symbol:'image://'+require("@/assets/images/zhi1.png"),
          symbolSize: [0, 20], //只保留地图外标记
          opacity: 0.6,
          lineStyle: {
            //视觉引导线属性
            width: 2.2,
            type: "solid",
            opacity: 0.7,
            // color: "#f1374c", //引导线颜色
            shadowColor: "rgba(234,147,157,0.5)",
            shadowBlur: 5,
            shadowOffsetX: 2,
            shadowOffsetY: 2,
          },
          data: resDatas,
          label: {
            show: true,
            formatter: (params) => {
              if (params.name.includes("直流")) {
                return params.name + " : " + params.data.zhi;
              } else {
                return "";
              }

              //文本提示框
            },
            offset: [0, 20],
            align: "left",
          },
        };
        this.mapChartOption.series.push(opt);
        this.mapChart.setOption(this.mapChartOption);
      });
    },
    // convertLineData2() {
    //   let mapData = [
    //     { name: "南京市", img: "zhi1", coords: [[], []] },
    //     { name: "扬州市", img: "jiao1" },
    //     { name: "淮安市", img: "zhi0" },
    //     { name: "连云港市", img: "zhi2" },
    //   ];
    //   let resDatas = [];
    //   for (let i = 0; i < mapJson.features.length; i++) {
    //     let tmpItem = mapData.find(
    //       (x) => x.name == mapJson.features[i].properties.name
    //     );
    //     let item = mapJson.features[i];
    //     let resItem = {};
    //     if (tmpItem) {
    //       resItem.name = item.properties.name;
    //       resItem.symbol =
    //         "image://" + require("@/assets/images/" + tmpItem.img + ".png");
    //       resItem.coords = [
    //         item.properties.center,
    //         [
    //           item.properties.center[0] < 120
    //             ? item.properties.center[0] - (Math.random() + 2)
    //             : item.properties.center[0] + (Math.random() + 2),
    //           item.properties.center[1],
    //           //item.properties.center[1]<32.51?item.properties.center[1]-(Math.random()+0.8):item.properties.center[1]+(Math.random()+0.8)
    //         ],
    //       ];
    //       resDatas.push(resItem);
    //     }
    //   }
    //   return resDatas;
    // },
    goDidiao() {
      this.$emit("redirect", "business", "didiao");
    },
    //在地图上加点
    dotOnMap() {
      const data = this.convertImgData();
      let pointOpt = {
        name: "标记点",
        type: "scatter",
        coordinateSystem: "geo",
        data: data,
        symbolSize: 50,
        label: {
          show: true,
          formatter: function (params) {
            //文本提示框
            return params.value[2];
          },
          // formatter: "{b}",
          position: "left",
        },
        itemStyle: {
          color: "#ddb926",
        },
        /*emphasis: {
        label: {
          show: true
        }
      }*/
      };
      this.mapChartOption.series.push(pointOpt);
    },
  },
  components: {},
};
</script>

<style scoped lang="scss">
::v-deep .myTimepicker {
  position: absolute;
  top: -55px;
  right: 80px;
  z-index: 10;

  .el-button {
    width: 100px;
    height: 33px;
    padding: 0;
    border: none;
    margin: 0;
    // background: url(../../../images/views/home/TabNav.png) no-repeat
    //   center;

    background: url(../../../assets/images/views/home/TabNav.png) no-repeat
      center;

    &:hover,
    &:focus,
    &.on {
      // background: url(../../../assets/images/views/home/TabNavHover.png)
      //   no-repeat center;

      background: url(../../../assets/images/views/home/TabNavHover.png)
        no-repeat center;
      color: #444;
    }
  }

  .el-date-editor {
    width: 150px;
    height: 28px;
    border: 1px solid #82cbbe;
    bottom: -2px;
    margin-left: 10px;
    border-radius: 4px;

    ::v-deep .el-input__inner {
      border: none;
      padding-left: 10px;
      height: 26px;
      font-weight: bold;
    }

    ::v-deep .el-input__prefix {
      left: auto;
      font-size: 18px;
      right: 5px;
      color: #3f8d94;

      .el-input__icon {
        font-weight: bold;
      }
    }
  }
}

// .myTimepicker{
//   position: absolute;
//   top:-55px;
//   right: 115px;
//   z-index: 10;
// }

.container_main {
  display: flex;

  .container_left {
    .title {
      width: 322px;
      height: 34px;
      line-height: 34px;
      padding-left: 47px;
      box-sizing: border-box;
      color: #00706b;
      font-size: 18px;
      font-weight: bold;
      background: url(../../../assets/images/views/home/titleBg.png) left center
        no-repeat;

      span {
        font-size: 12px;
        float: right;
        color: #333;
        font-weight: normal;
      }
    }

    .phyd {
      background: url(../../../assets/images/phyd_bg.png) no-repeat;
      width: 380px;
      height: 310px;
      padding: 12px 0 0 14px;

      #phydChart {
        width: 340px;
        height: 250px;
      }
    }

    .fqgdyd {
      background: url(../../../assets/images/fqgdyd_bg.png) no-repeat;
      width: 380px;
      height: 618px;
      padding: 12px 14px 0 14px;

      #fqgdydChart1 {
        width: 352px;
        height: 260px;
        margin-bottom: 20px;
      }

      .line {
        width: 98%;
        height: 1px;
        background: #8cd4e6;
        margin: 0 auto;
      }

      #fqgdydChart2 {
        width: 352px;
        height: 260px;
      }
    }
  }

  .container_center {
    width: 1115px;
    height: 930px;
    display: flex;

    .left {
      width: 12%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
    }

    .right {
      width: 88%;
      height: 100%;

      .top {
        width: 100%;
        height: 12%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: relative;

        .info-unit {
          position: absolute;
          right: 20px;
          top: 10px;
          font-weight: normal;
          font-size: 14px;
          color: #2e393a;
        }
      }

      .bottom {
        width: 100%;
        height: 88%;

        .news {
          width: 100%;
          height: 10%;
          display: flex;
          justify-content: center;
          align-items: center;

          .news-title {
            z-index: 3;
            width: 120px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #2f6e6a;
            color: #ffffff;
            border-radius: 20px;
          }

          ::v-deep .el-badge__content.is-fixed {
            right: 18px;
          }

          .news-content {
            width: calc(100% - 200px);
            height: 40px;
            line-height: 40px;
            padding-left: 50px;
            margin-left: -40px;
            border: 1px solid #2f6e6a;
            border-radius: 20px;
          }
        }

        .map {
          width: 100%;
          height: 90%;
          position: relative;

          .anhuiBox {
            color: #65a7e8;
            position: absolute;
            bottom: 285px;
            left: 308px;
            z-index: 10;
            font-size: 12px;
          }

          .zhejiang {
            color: #65a7e8;
            position: absolute;
            bottom: 22px;
            left: 497px;
            z-index: 10;
            font-size: 12px;
          }

          .shanghaitext {
            color: #65a7e8;
            position: absolute;
            bottom: 81px;
            right: 111px;
            z-index: 10;
            font-size: 12px;
          }

          .map-legend {
            position: absolute;
            z-index: 100;
            right: 20px;
            top: 20px;
            width: 270px;
            height: 170px;
            padding: 10px 15px;
            background: url(../../../assets/images/legend-bg.png) center
              no-repeat;
            background-size: 100% 100%;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: flex-start;

            .legend-row {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              width: 50%;
              height: 28px;
              line-height: 28px;

              img {
                width: 20px;
                height: 20px;
                margin-right: 5px;
              }

              span {
                font-size: 14px;
                color: #2b2f3a;
              }
            }
          }

          .changjiang {
            position: absolute;
            z-index: 1;
            width: 310px;
            height: auto;
            bottom: 180px;
            right: 260px;
            opacity: 0.6;
            pointer-events: none;
          }

          .duanmian {
            position: absolute;
            z-index: 1;
            pointer-events: none;

            &.anhui {
              left: 230px;
              top: 52%;
              width: 180px;
              height: 90px;
            }

            &.zhejiang {
              left: 43%;
              bottom: 0px;
              width: 140px;
              height: 140px;
            }

            &.shanghai {
              right: 135px;
              bottom: 50px;
              width: 140px;
              height: 140px;
            }
          }
        }
      }
    }
  }

  .map-info {
    margin: 10px 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 10px 8px 65px;
    background-size: 100% 100%;

    &.info-max {
      background: url(../../../assets/images/balance-max.png) left center
        no-repeat;
    }

    &.info-min {
      background: url(../../../assets/images/balance-min.png) left center
        no-repeat;
    }

    &.info-positive {
      background: url(../../../assets/images/balance-positive.png) left center
        no-repeat;
    }

    &.info-nagetive {
      background: url(../../../assets/images/balance-nagetive.png) left center
        no-repeat;
    }

    .info-label {
      font-weight: 400;
      font-size: 16px;
      font-family: SourceHanSansCN-Regular;
      height: 22px;
      line-height: 22px;
      color: #2e393a;
    }

    .info-val {
      font-weight: 500;
      font-size: 20px;
      color: #0979a9;
      height: 22px;
      line-height: 22px;

      span {
        font-weight: normal;
        font-size: 12px;
        color: #2e393a;
      }
    }
  }

  .container_right {
    // background-color: red($color: git );
    // background-color: red($color: git );
    // background-color: red($color: git );
    // background-color: red($color: git );
    .gjtd {
      background: url(../../../assets/images/gjtd_bg.png) no-repeat;

      box-sizing: border-box;
      padding-left: 14px;
      padding-right: 8px;
      width: 379px;
      height: 629px;

      .gjtd_title {
        color: #2f6e6a;
        line-height: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        text-indent: 35px;

        p {
          margin-right: 20px;
          color: #4b5354;
        }
      }

      .gjtd_echarts {
        margin-top: 10px;
        height: 191px;
        border-bottom: 1px solid #8cd4e6;
        width: 100%;
      }

      .gjtd_jdt {
        height: calc(100% - 216px - 60px);
        width: 100%;

        .top {
          display: flex;
          padding-left: 245px;
          box-sizing: border-box;

          .chaoliu {
            font-size: 14px;
            display: flex;
            align-items: center;

            div {
              margin-left: 5px;
            }
          }
        }

        .progressBox {
          width: 100%;
          height: 40px;
          padding-left: 17px;
          padding-right: 17px;
          box-sizing: border-box;
          margin-top: 10px;

          .name {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            height: 50%;
            align-items: center;
            border-bottom: 1px dashed #3f8c94;

            .num {
              font-size: 12px;
              color: #2f6e6a;
            }

            .nameText {
              text-indent: 25px;
              background: url(../../../assets/images/rightImages/byq.png)
                no-repeat;
            }
          }

          .line {
            width: 100%;
            height: 50%;
            display: flex;
            justify-content: space-between;

            .line_xian {
              width: 50%;
            }

            .line_num {
              font-size: 14px;
            }
          }
        }
      }
    }

    .dmzgzxx {
      background: url(../../../assets/images/dmgzxx_bg.png) no-repeat;
      width: 379px;
      height: 259px;
      box-sizing: border-box;
      margin-top: 15px;
      padding-left: 33px;
      padding-right: 21px;

      .dmzgzxx_title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-indent: 36px;
        height: 25px;
        padding-top: 9px;

        .leftText {
          color: #2e6e6a;
          height: 25px;
          margin-left: -20px;
        }

        .rightText {
          background: url(../../../assets/images/rightImages/zhongzai.png)
            no-repeat;
          height: 25px;
        }
      }

      .dmzgzxx_tabs {
        width: 85%;
        padding: 2px 10px;
        margin: 10px auto;
        margin-top: 20px;
        height: 30px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        background: url(../../../assets/images/ploy-label.png) center no-repeat;
        background-size: 100% 100%;

        .info {
          width: 50%;
          height: 30px;
          line-height: 30px;
          height: 100%;
          font-size: 16px;
          text-align: center;
        }
      }
    }

    .dmzgzxx_content_main {
      overflow-y: scroll;
      height: 165px;
      width: calc(100% + 21px);
      position: relative;
      left: -10px;
    }

    .dmzgzxx_content {
      width: 100%;
      margin-top: 14px;
      cursor: pointer;

      .colorBox {
        height: 33px;
        width: 331px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 5px;
        padding-right: 5px;
        font-weight: 600;
        background: url(../../../assets/images/rightImages/xdnrk.png) no-repeat;

        .imgBox {
          color: red;
          background: url(../../../assets/images/rightImages/red.png) left
            center no-repeat;
          padding-left: 30px;
        }

        .imgBox2 {
          color: #ac9c3d;
          background: url(../../../assets/images/rightImages/yellow.png) left
            center no-repeat;
          padding-left: 30px;
        }
      }
    }
  }

  .textBox {
    height: 33px;
    padding-left: 30px;
    box-sizing: border-box;
    font-size: 14px;
    width: 331px;
  }
}

::v-deep .el-progress-bar__outer {
  background: #c1e0dd !important;
}

::v-deep .el-progress.is-success .el-progress-bar__inner {
  background: linear-gradient(to right, #e5f1f2, #408d95) !important;
}

::v-deep .el-icon-circle-check:before {
  content: "";
  display: none;
}

.timeline {
  position: relative;
  width: 100%;
  //height: 750px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.timeline-wrap {
  background: url(../../../assets/images/timeline-bg.png) left top no-repeat;

  background-size: 68px 20px;
  padding-top: 1px;
  position: relative;
  padding-bottom: 8px;

  &:hover {
    background-image: url(../../../assets/images/timeline-bg-hover.png);
  }
}

.timeline-wrap2 {
  background: url(../../../assets/images/timeline-bg.png) left top no-repeat;
  // background: url(./bacolor.png) left top no-repeat;
  // background-color: red;
  background-size: 68px 20px;
  padding-top: 1px;
  position: relative;
  padding-bottom: 8px;
}

.timeline-abs {
  position: absolute;
  left: -3px;
  top: -8px;
  width: 32px;
  height: 24px;
  opacity: 0.7;
  border-radius: 5px;
}

.abs-red {
  background-image: linear-gradient(to left, #eee, #c63c63);
  border: 1px #a10c35;
}

.abs-yellow {
  background-image: linear-gradient(to left, #eee, #eee327);
  border: 1px #989007;
}

.timeline-icon {
  position: absolute;
  left: 0px;
  top: -3px;
  width: 14px;
  height: 14px;
}

.timeline-legend {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 14px;
  color: #4a4a4a;
  padding-left: 40px;

  div {
    background-size: 20px auto;
    padding-left: 23px;
  }

  .status1 {
    background: url(../../../assets/images/status1.png) left center no-repeat;
  }

  .status2 {
    background: url(../../../assets/images/status2.png) left center no-repeat;
  }

  .type1 {
    background: url(../../../assets/images/icon-top.png) left center no-repeat;
  }

  .type2 {
    background: url(../../../assets/images/icon-bottom.png) left center
      no-repeat;
  }
}

.myslider {
  // width: 100%;
  // height: 720px;
  // position: absolute;
  // left: 26px;
  // top: 8px;
  // // z-index: 10;
  // opacity: 0.8;
}

.mytooltip {
  // position: absolute;
  // z-index: 2;
  // left: 42px;
  // width: 140px;
  // height: 30px;
  // line-height: 30px;
  // background: url("../../../assets/images/currenttime-bg.png") center no-repeat;
  // background-size: 100% 100%;
  // border-radius: 4px;
  // padding-right: 12px;
  // color: #ffffff;
  // font-weight: 500;
  // text-align: right;
}

::v-deep .el-slider.is-vertical .el-slider__runway {
  width: 6px;
  height: 100%;
  margin: 0 16px;
  background-color: transparent;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
}

::v-deep .el-slider.is-vertical .el-slider__bar {
  width: 6px;
  height: auto;
  border-radius: 0 0 3px 3px;
  background-color: transparent;
}

::v-deep .el-slider__button {
  width: 150px;
  height: 30px;
  //border: solid 2px #000;
  //background-color: #000;
  //border-radius: 50%;
  border: none;
  border-radius: 0;
  background-color: transparent;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.myslider {
  width: 100%;
  height: 720px;
  position: absolute;
  left: 26px;
  top: 8px;
  // z-index: 10;
  z-index: -2;
  opacity: 0.8;
}

.mytooltip {
  position: absolute;
  z-index: 0;
  left: 42px;
  width: 140px;
  height: 30px;
  line-height: 30px;
  background: url("../../../assets/images/currenttime-bg.png") center no-repeat;
  background-size: 100% 100%;
  border-radius: 4px;
  padding-right: 12px;
  color: #ffffff;
  font-weight: 500;
  text-align: right;
}

::v-deep .el-slider.is-vertical .el-slider__runway {
  width: 6px;
  height: 100%;
  margin: 0 16px;
  background-color: transparent;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
}

::v-deep .el-slider.is-vertical .el-slider__bar {
  width: 6px;
  height: auto;
  border-radius: 0 0 3px 3px;
  background-color: transparent;
}

::v-deep .el-slider__button {
  width: 150px;
  height: 30px;
  //border: solid 2px #000;
  //background-color: #000;
  //border-radius: 50%;
  border: none;
  border-radius: 0;
  background-color: transparent;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

::v-deep .buttonBkGrey {
  background-color: gray !important;
}

::v-deep .el-popover {
  min-width: 90px !important;
}
</style>
